<template>
  <ScalablePage>
    <div class="big-screen aqgl flex-between" style="width: 480px; overflow: hidden;">
      <!-- 送水泵房-1#水泵 -->
      <!-- 右部 -->
      <div class="rigtContainer">
        <img src="@/assets/dxq/ssbf/ones.png" alt="" class="heaimg" />
        <img src="@/assets/dxq/zssj.png" alt="" class="zssj-img" />
        <div class="right-content-icon">
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1"
                  >设备编码</span
                >
              </p>
              <p class="p2">{{ shuiwu.equipment_code===""?"-":shuiwu.equipment_code }}</p>

            </div>
          </div>
          <!-- 第二个 -->
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">型号规格</span>
              </p>
              <p class="p2">{{ shuiwu.product_model===""?"-":shuiwu.product_model }}</p>

            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">设备品牌</span>
              </p>
              <p class="p2">{{ shuiwu.equipment_brand===""?"-":shuiwu.equipment_brand }}</p>

            </div>
          </div>
          <!-- 第四个 -->
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">设备状态</span>
              </p>
              <p class="p2">{{ shuiwu.equip_status===""?"-":shuiwu.equip_status }}</p>

            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">资产状态</span>
              </p>
              <p class="p2">{{ shuiwu.asset_status===""?"-":shuiwu.asset_status }}</p>

            </div>
          </div>
          <!-- 第六个 -->
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">上次故障时间</span>
              </p>
              <p class="p2">-</p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">维护倒计时</span>
              </p>
              <p class="p2">-</p>
            </div>
          </div>
          <!-- 第八个 -->
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">运行时长</span>
              </p>
              <p class="p2">{{ shuiwu.runtimesum===""?"-":shuiwu.runtimesum }}小时</p>

            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">安装日期</span>
              </p>
              <p class="p2">-</p>
            </div>
          </div>
          <!-- 第十个 -->
          <!-- <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">维护倒计时</span>
              </p>
              <p class="p2">-</p>
            </div>
          </div> -->
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">电机定子温度1A相1</span>
              </p>
              <p class="p2">{{ shuiku.w1ax1 }}°C</p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">电机定子温度2A相2</span>
              </p>
              <p class="p2">{{ shuiku.w2ax2 }}°C</p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">电机定子温度3B相1</span>
              </p>
              <p class="p2">{{ shuiku.w3bx1 }}°C</p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">电机定子温度4B相2</span>
              </p>
              <p class="p2">{{ shuiku.w4bx2 }}°C</p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">电机定子温度5C相1</span>
              </p>
              <p class="p2">{{ shuiku.w5cx1 }}°C</p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">电机定子温度6C相2</span>
              </p>
              <p class="p2">{{ shuiku.w6cx2 }}°C</p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">轴承温度1</span>
              </p>
              <p class="p2">{{ shuiku.zhouwen1 }}°C</p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">轴承温度2</span>
              </p>
              <p class="p2">{{ shuiku.zhouwen2 }}°C</p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">输出单耗</span>
              </p>
              <p class="p2">-</p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">输出电压</span>
              </p>
              <p class="p2">
                {{ shuiku.dianya }}
                <span class="p1-sp2">V</span>
              </p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">输出电流</span>
              </p>
              <p class="p2">{{ shuiku.dianliu }}<span class="p1-sp2">A</span></p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">泵组温度</span>
              </p>
              <p class="p2">{{ shuiku.wendu }}<span class="p1-sp2">°C</span></p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">正向功率</span>
              </p>
              <p class="p2">{{ shuiku.gonglv }}<span class="p1-sp2">KW</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ScalablePage>
</template>
<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue"; // 引入组件自适应

import { onMounted, ref, toRefs, reactive } from "vue";
import { prodApi } from "@/utils/shuiwu/api";


import {getCurrentDateFormatted} from "@/utils/date"
const equipment_name="1#水泵"



const state = reactive({
  shuiku: {
    dianya: 0,
    dianliu: 0,
    wendu: 0,
    gonglv: 0,
    pinlv: 0,
    w1ax1:0,
    w2ax2:0,
    w3bx1:0,
    w4bx2:0,
    w5cx1:0,
    w6cx2:0,
    zhouwen1:0,
    zhouwen2:0
  },
  shuiwu:{
     
     equipment_brand:"", // 设备品牌
     asset_status:"",   // 资产状态
     product_model:"", // 规格型号
     equipment_code:"", // 设备编码
     runtimesum: "", // 运行时长==单位小时
     equip_status:"" // 设备状态
   }
});

let { shuiku,shuiwu } = toRefs(state);

onMounted(() => {
  getShuiKu(630);
  getWendu(642);
  getEquipmentInfo()

});

function getShuiKu(id: number) {
  prodApi(id).then((res) => {
    let arr = res.rows as any;

    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4834) {
        state.shuiku.dianya = arr[i].value;
      }
      if (arr[i].modelId == 4831) {
        state.shuiku.dianliu = arr[i].value;
      }

      if (arr[i].modelId == 4830) {
        state.shuiku.gonglv = arr[i].value;
      }
    }
  });
}
function getWendu(id: number) {
  prodApi(id).then((res) => {
    let arr = res.rows as any;

    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4651) {
        state.shuiku.wendu = arr[i].value;
        state.shuiku.w1ax1 = arr[i].value;

      }


      if (arr[i].modelId == 4652) {
        state.shuiku.w2ax2 = arr[i].value;
      }
      if (arr[i].modelId == 4654) {
        state.shuiku.w3bx1 = arr[i].value;
      }
      if (arr[i].modelId == 4656) {
        state.shuiku.w4bx2 = arr[i].value;
      }
      if (arr[i].modelId == 4659) {
        state.shuiku.w5cx1 = arr[i].value;
      }
      if (arr[i].modelId == 4661) {
        state.shuiku.w6cx2 = arr[i].value;
      }
      if (arr[i].modelId == 4663) {
        state.shuiku.zhouwen1 = arr[i].value;
      }
      if (arr[i].modelId == 4665) {
        state.shuiku.zhouwen2 = arr[i].value;
      }
    }
  });
}

function getEquipmentInfo() {
let reg={queryDay:getCurrentDateFormatted()}
fetch(`http://192.168.254.34:8090/getRealtimeData/selectEquipmentInfoList?${new URLSearchParams(reg).toString()}`)
    .then((r) => {
      if (r.status === 200) {
        return r.json();
      } else {
        return Promise.reject(r.json()); 
      }
    })
    .then((res) => {
      // state.bengzu.gongkuang=res.data[0].IndexVal
      if(res.data && res.data.length){
        for(let i=0; i<res.data.length; i++){
          if(res.data[i].equipment_name.includes(equipment_name)){
            state.shuiwu.asset_status=res.data[i].asset_status;
            state.shuiwu.equipment_brand=res.data[i].equipment_brand;
            state.shuiwu.equipment_code=res.data[i].equipment_code;
            state.shuiwu.product_model=res.data[i].product_model;
            state.shuiwu.equip_status=res.data[i].equip_status;
            state.shuiwu.runtimesum=res.data[i].runtimesum;
          }
        }
      }
    });
}


</script>
<style scoped lang="less">
// 样式引入
@import url("../../styles/aqgl.less");
// 右边
.rigtContainerg {
  top: 0;
  right: 0;
  // width: 695px;
  // height: auto;
  max-height: 1000px;
}
.heaimg {
  // height: 54px;
  width: 100%;
}
.image-container {
  position: relative;
  width: 535.67px;
  height: 54px;
  img {
    width: 100%;
    height: 100%;
    position: absolute; /* 绝对定位 */
    top: 0;
    left: 0;
  }
  p {
    position: absolute;
    display: inline-block;
    top: 2px;
    left: 41px;
    font-family: OPPOSans, OPPOSans;
    font-weight: normal;
    font-size: 30px;
    color: #ffffff;
    line-height: 40px;
    text-align: left;
    font-style: normal;
  }
}
.zssj-img {
  margin-top: 3px;
  // width: 205px;
  // height: auto;
  // max-height: 40px;
}
.right-content-icon {
  max-width: 480px;
  // margin-top: 33px;
  margin-top: 10px; // 减小上边距
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: flex-start;
  // align-items: flex-start;
  /* 网格布局 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1px;
  grid-template-rows: auto; /* 行高自动适应内容 */
  // 选择奇数的.item元素
  .right-content-icon .item:nth-child(odd) {
    margin-left: 0px;
  }
  // 选择偶数的.item元素
  .right-content-icon .item:nth-child(even) {
    // margin-left: 10px;
    margin-left: 2px; // 减小左右元素间距
  }
  .item {
    display: flex;
    // margin-bottom: 33px; /* 每个.item的底部外边距 */
    // width: 50%; /* 每个.item占据50%的宽度，从而每行两个 */
    // height: 64px;
    margin-bottom: 1px; /* 减小每个.item的底部外边距 */
    min-height: 63px; // 减小高度
    align-items: center;
    .text {
      display: flex;
      flex-direction: column;
      // margin-left: 21px;
      margin-left: 10px; // 减小左边距
      width: 150px;
      .p1 {
        display: flex;
        .p1-sp1 {
          font-family: D-DIN, D-DIN;
          font-weight: bold;
          // font-size: 19px;
          // color: #ffffff;
          // line-height: 29px;
          font-size: 12px; // 减小字体大小
          color: #ffffff;
          line-height: 10px; // 减小行高
          text-align: left;
          font-style: normal;
          margin-right: 1px;
          // white-space: nowrap;
          // overflow: hidden;
          // text-overflow: ellipsis;
        }
        .p1-sp2 {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          // font-size: 17px;
          // color: #d2d2d2;
          // line-height: 29px;
          font-size: 12px; // 减小字体大小
          color: #d2d2d2;
          line-height: 10px; // 减小行高
          text-align: left;
          font-style: normal;
        }
      }
      .p2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        // font-size: 17px;
        // color: #ffffff;
        // line-height: 29px;
        font-size: 12px; // 减小字体大小
        color: #ffffff;
        line-height: 29px; // 减小行高
        text-align: left;
        font-style: normal;
        // display: -webkit-box; /* 使用弹性盒子模型 */
        // -webkit-box-orient: vertical; /* 垂直排列子元素 */
        // -webkit-line-clamp: 2; /* 限制显示两行 */
        // line-clamp: 2;
        // overflow: hidden; /* 隐藏超出部分 */
      }
    }
  }
}
.right-content-icon img {
  // width: 76px;
  // height: 66px;
  width: 56px; // 减小图片宽度
  height: 46px; // 减小图片高度
}
</style>
